<template>
  <div class="tooltip-wrapper" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    <div class="tooltip-trigger">
      <slot></slot>
    </div>
    <transition name="tooltip-fade">
      <div v-show="visible" class="tooltip" :class="[`tooltip-${placement}`]">
        <div class="tooltip-content">{{ content }}</div>
        <div class="tooltip-arrow"></div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'FeedbackTooltip',
  props: {
    content: {
      type: String,
      required: true
    },
    placement: {
      type: String,
      default: 'top',
      validator: value => ['top', 'bottom', 'left', 'right'].includes(value)
    },
    delay: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      visible: false,
      timer: null
    }
  },
  methods: {
    handleMouseEnter() {
      if (this.delay) {
        this.timer = setTimeout(() => {
          this.visible = true
        }, this.delay)
      } else {
        this.visible = true
      }
    },
    handleMouseLeave() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.visible = false
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer)
    }
  }
}
</script>

<style scoped>
.tooltip-wrapper {
  display: inline-block;
  position: relative;
}

.tooltip {
  position: absolute;
  z-index: 2000;
  background: #303133;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}

.tooltip-content {
  position: relative;
  z-index: 1;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}

.tooltip-top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
}

.tooltip-top .tooltip-arrow {
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: #303133;
}

.tooltip-bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
}

.tooltip-bottom .tooltip-arrow {
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: #303133;
}

.tooltip-left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
}

.tooltip-left .tooltip-arrow {
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: #303133;
}

.tooltip-right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
}

.tooltip-right .tooltip-arrow {
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: #303133;
}

.tooltip-fade-enter-active,
.tooltip-fade-leave-active {
  transition: opacity 0.3s;
}

.tooltip-fade-enter,
.tooltip-fade-leave-to {
  opacity: 0;
}
</style> 